<!-- 收入账单页面 -->
<link rel="stylesheet" href="/css/afterLoginPage.css">
<style>
.user-info-list .ul-li{
	line-height:24px;
}
.content-top{
    width: 100%;
    box-sizing: border-box;
    padding: 10px 20px;
}
.content-top p{
    margin-top: 15px;
    margin-bottom: 24px;
}
.content-top .title{
	font-size: 16px;
	color: #979797;
	margin-right:20px;
}
.content-top .price{
	font-size: 16px;
	color: #FF1D1D;
}
.content-top .unit{
	font-size: 12px;
	color: #000000;
}
.content-top .layui-btn-ccc{
	color:#fff;
	background:#9d9b9b !important;
}
.content-top .tip{
	color:#cacac9;
	font-size:12px;
	margin-left:15px;
}
.search-middle{
	padding: 5px;
	margin-top:36px;
}
.search-middle .layui-form-label{
	text-align:left;
	font-size: 14px;
	color: #595959;
}
table.user-table {
   width: 100%;
   table-layout: fixed;
}
table.user-table tr th,
table.user-table tr td {
 	word-break:keep-all;
    white-space:nowrap; 
    overflow:hidden;
    text-overflow:ellipsis;
}
table.user-table tr th {
	background: #E7E7E7;
	border-radius: 3px;
	height: 30px;
	font-size: 14px;
	color: #4D4D4D;
	text-align: center;
	border: 3px solid #fff;
}
table.user-table tr td {
	height: 60px;
	font-size: 12px;
	color: #4D4D4D;
	text-align: center;
}
table.user-table tr{
    border-bottom: 1px solid #ddd;
}
table.user-table tr:nth-of-type(even) {
	background: #EFEFEF;
	
}
.info{
	font-size: 14px;
	color: #6AD2E7;
}
.amount-input{
	margin-top:20px;
}
.hint-a{
	color: #6AD2E7;
}
.layui-layer-page .layui-layer-content{
    text-indent: 15px;
    padding: 10px 10px 0 10px;
}
.layui-tab-brief>.layui-tab-title .layui-this {
    color: #000!important;
}
.layui-tab-brief>.layui-tab-more li.layui-this:after, .layui-tab-brief>.layui-tab-title .layui-this:after{
	border-bottom: 3px solid #818080!important;
}
.layui-tab-title {
	border-color: #818080!important;
}
.phone-info{
	display: none;
}
.phone-equestWithdrawal{
	display: none;
}
.phone-search-middle{
	display: none;
}
.phone-line{
	display: none;
}
/* 移动端 */
@media screen and (max-width: 414px),@media screen  and (orientation: landscape),
only screen and (max-device-width: 414px) {
	.layui-tab .layui-tab-content {
	    padding: 0px!important;
	}
	.pc{
		display: none!important;
	}
	.phone-equestWithdrawal{
		display: block;
		text-align: center;
		margin-bottom: 0.693333rem;
	}
	.phone-tip{
		display: block;
		width: 100%;
		text-align: center;
	}
	.phone-search-middle{
		display: flex;
		position: relative;
		padding: 0.266667rem;
		align-items: center;
	    justify-content: space-between;
	}
	.phone-line{
		display: block;
		width: 100%;
		height:0.266667rem;
	    background: #ece1d7;
	}
	.phone-search-middle .title{
		font-size: 0.426667rem;
		color: #070707;
	}
	.phone-search-middle .info-tip{
		font-size: 0.266667rem;
		color: #A0A0A0;
	}
	.content-top {
	    padding: 0.266667rem;
	}
	.content-top p {
	    margin-top: 0.4rem;
	    margin-bottom: 0.64rem;
	    text-align: center;
	}
	.content-top .title {
	    font-size: 0.426667rem;
	    margin-right: 0.533333rem;
	}
	.content-top .price {
	    font-size: 0.426667rem;
	}
	.content-top .unit {
	    font-size: 0.32rem;
	}
	.phone-info{
		display: block;
		margin:0!important;
		text-align: right!important;
		margin-bottom: 0.24rem!important;
		font-size: 0.373333rem;
		color: #47DCF0;
	}
	.phone-info a{
		font-size: 0.373333rem;
		color: #47DCF0;
	}
	.info {
		display: none;
	    font-size: 0.373333rem;
	}
	.layui-btn {
	    height: 1.013333rem!important;
	    line-height: 1.013333rem!important;
	    padding: 0 0.48rem!important;
	    font-size: 0.373333rem!important;
	    border-radius: 0.053333rem!important;
	}
	.content-top .tip {
	    font-size: 0.32rem;
	    margin-left: 0.2rem;
	}
	.table-list{
	    padding: 0 0.266667rem;
	}
	table.user-table tr {
	    border-bottom: 0.026667rem solid #ddd;
	}
	table.user-table tr th {
	    border-radius: inherit!important;
	    background: #ECE1D5;
	    height: 0.8rem;
	    font-size: 0.373333rem;
        border: 0.08rem solid #ECE1D5;view.addObject("titleName", "个人资料") ;
	}
	table.user-table tr td {
	    height: 1.2rem;
	    font-size: 0.32rem;
	}
}
</style>
<div class="main layui-clear" style="min-height: 600px;position: relative;padding-bottom: 70px;">
	<div class="layui-bar">
    	<div class="layui-breadcrumbs">
    		<a class="home" href="/"></a>
			<i class="layui-icon">&#xe602;</i>
	  		<a href="/user/profile.html">个人资料</a>
	  		<i class="layui-icon">&#xe602;</i>
	  		<a href="/deposit/depositList.html">收入账单</a>
    	</div>
    </div>
    <#include "/apps/user/userTopInformation.html">
	 <div class="ukefu-profile-menu">
		<#include "/apps/user/userinfo.html">
	</div>
	
	<div class="ukefu-profile">
		<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief" style="margin:10px 20px;">
			<#include "/apps/user/profilemenu.html">
			<div class="layui-tab-content">
				<!-- 收入账单 -->
				<div class="layui-tab-item layui-show">
					<div class="layui-form mine-view" style="display: block;">
						<div class="content-top">
							<p class="phone-info"><a href="/deposit/incomeList.html">查看收入详情</a></p>
							<p>
								<span class="title">我的收入</span>
								<span class="price">${totalIncome}</span>
								<span class="unit">RMB</span>
								<a class="info" href="/deposit/incomeList.html">查看收入详情</a>
							</p>
							
							<div class="phone-equestWithdrawal">
								<#if  (configUration.amount!?number)<=(totalIncome!?number) >
									<button id="pay-btn" class="layui-btn" onclick="requestWithdrawal('${user.id!''}');">申请提现</button>
								<#else>
									<button id="pay-btn" class="layui-btn layui-btn-ccc layui-btn-disabled">申请提现</button>
								</#if>
							</div>
							<#if  (configUration.amount!?number)<=(totalIncome!?number) >
								<button id="pay-btn" class="layui-btn pc" onclick="requestWithdrawal('${user.id!''}');">申请提现</button>
							<#else>
								<button id="pay-btn" class="layui-btn layui-btn-ccc layui-btn-disabled pc">申请提现</button>
							</#if>
							<div class="layui-hide" id="explaincontent">${(configUration.explaincontent!'')?no_esc}</div>
							<span class="phone-tip"><span class="tip">收入满&nbsp;${configUration.amount!?string('0.00')}&nbsp;元，可以申请提现哦</span><a href="#"  class="hint-a" onclick="profitThat();">（ 获利说明 ）</a></span>
						</div>
						<div class="phone-line"></div>
						<div class="phone-search-middle">
							<span class="title">账单查询</span>
							<span class="info-tip">详细账单请前往 电脑端查询</span>
						</div>
						<div class="search-middle pc">
							<form class="layui-form" action="/deposit/depositList.html">
								<input type="hidden" name="time" id="time" class="layui-input">
								<div class="layui-form-item">
								    <label class="layui-form-label">账单查询</label>
								    <div class="layui-input-inline">
								    	<#if  time!= ''>
									      <input type="text" id="year" class="layui-input" placeholder="请选择年份" value="${time!?substring(0,4)}">
									    <#else>
									      <input type="text" id="year" class="layui-input" placeholder="请选择年份">
								    	</#if>
								      
								    </div>
								    <div class="layui-input-inline">
								      <select id="month">
								      	<#if  time!= ''>
									      	<option value="01" <#if  time!?substring(5,7)=='01'>selected="selected"</#if>>一月份</option>
									        <option value="02" <#if  time!?substring(5,7)=='02'>selected="selected"</#if>>二月份</option>
									        <option value="03" <#if  time!?substring(5,7)=='03'>selected="selected"</#if>>三月份</option>
									        <option value="04" <#if  time!?substring(5,7)=='04'>selected="selected"</#if>>四月份</option>
									    <#else>
									    	<option value="01">一月份</option>
									        <option value="02">二月份</option>
									        <option value="03">三月份</option>
									        <option value="04">四月份</option>
								    	</#if>
								        
								      </select>
								    </div>
								    <button class="layui-btn" lay-filter="search-bill" lay-submit="">确定</button>
								  </div>
							</form>
						</div>
						<div class="table-list">
							<table class="user-table">
						    	<thead>
							    	<tr>
								    	<th width="34%">提现时间</th>
								    	<th width="33%">预计收入</th>
								    	<th width="33%">状态</th>
							    	</tr>
						    	</thead>
						    	<tbody>
						    		<#if depositList??>
									<#list depositList.content as list>
										<tr>
									    	<td ><a href="#">${list.applyTime!?string("yyyy-MM-dd")}</a></td>
									    	<td>RMB :${list.amount!?string('0.00')}</td>
									    	<td> 
									    		<#if list.status ==0>
									    			提现申请中
									    		<#else>
									    			提现成功
									    		</#if>
									    		<!-- <a class="info" href="/deposit/incomeList.html">查看详情</a> -->
									    	</td>
								    	</tr>
									</#list>
									</#if>
						    	</tbody>
						    </table>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div style="text-align: center" class="front-desk">
		<div class="laypage-main" id="pages"></div>
	</div>
</div>

<!-- 这里用了高版本的 -->
<link rel="stylesheet" href="/js/layui-v2.2.5/layui/css/layui.css">
<script src="/js/layui-v2.2.5/layui/layui.js"></script>

<script>

	layui.use(['laypage', 'layer','laydate'], function(){
		var laypage = layui.laypage;
		var laydate = layui.laydate;
		var form = layui.form;
		  
		  //执行一个laydate实例
		  laydate.render({
		    elem: '#year' //指定元素
		    ,type: 'year'
	    	,trigger: 'click'
    		,change: function(value, date, endDate){
    		    $("#year").val(value);
    		    $("body").click();
		  	}
		  });
		 $("#year").val(getNowDate(new Date()).substr(0,4));
		
	  	laypage.render({
		    cont: 'pages'
		    ,first:'首页'
		    ,last:'末页'
		    ,pages: ${depositList.totalPages}
		    ,curr:${depositList.number+1}
		    ,skin: '#32c24d'
	    	,skip: true
		    ,jump:function(obj, first){
		    	var curr = obj.curr;
		    	if (!first) {
	               location.href = '/admin/deposit/depositList?p=' + curr + "<#if RequestParameters['q']?? && RequestParameters['q'] != ''>&q=${RequestParameters['q']}</#if>";
	            }
		    }
		});
	  	
	  	form.on('submit(search-bill)', function(data){
	  		if($("#month").val() == ''){
	  			var time = $("#year").val();
	  		}else{
	  			var time = $("#year").val() +'-'+ $("#month").val();
	  		}
	    	$("#time").val(time);
		});
	  	
	  	
	});

	/* 申请提现 */
	function requestWithdrawal(userid){
						
		
		var htmlImg = '<form class="layui-form uk-form" id="amountform" action=""  method="post">'+
							'<input type="hidden" name="userId" id="userId" value="'+ userid +'">'+
							'<div class="layui-form-item amount-input">'+
						        '<label class="layui-form-label">提现金额</label>'+
						        '<div class="layui-input-inline">'+
						            '<input type="text" name="amount"  id="amount" id="title" class="layui-input" placeholder="请输入提现金额" >'+
						        '</div>'+
						    '</div>'+
						'</form>';
		
		layer.open({
			type: 1,
			title:'申请提现',
			skin: 'layui-layer-rim',
			area: ['400px', '200px'],
			btn: ['确定', '取消'],
			content: htmlImg,
			success: function(layero, index) {
				
			},
			yes: function(index, layero) {
				var allMoney = '${totalIncome}';
				var amount = $("#amount").val();
				if(Number(allMoney) < Number(amount)){
					layer.alert('提现金额不能大于我的收入金额', {icon: 2});
					return false;
				}else if(amount <= 0) {
					layer.alert('提现金额不能小于等于0', {icon: 2});
					return false;
		  	     }else if(amount === "" || amount ==null){
		  	    		layer.alert('请输入数字', {icon: 2});
						return false;
		  	     }else if(isNaN(amount)){
		  	        	layer.alert('提现金额不能小于等于0', {icon: 2});
						return false;
			  	 }else{
			  		 
			  		 
			  		$.ajax({
						type: "POST",
						url: '/deposit/saveDeposit.html' ,
						dataType: "text",
						data: $("#amountform").serialize(),
						async: true,
						success: function(data) {
							layer.closeAll();
							if(data.trim() == 'SUCESS'){
								layer.open({
									icon: 1,
									title:'申请提现',
									skin: 'layui-layer-rim',
									btn: ['确定'],
									content: '申请提现成功！',
									yes: function(index, layero) {
										layer.closeAll();
										window.location.reload();
									}
								});
							}else{
								layer.open({
									icon: 2,
									title:'申请提现',
									skin: 'layui-layer-rim',
									btn: ['确定'],
									content: '申请提现失败！',
									yes: function(index, layero) {
										layer.closeAll();
										window.location.reload();
									}
								});
							}
						}
					});
			  	 }
			}
		});
	}

	/* 获利说明 */
	function profitThat(){
		layer.open({
			type: 1,
			title:'获利说明',
			skin: 'layui-layer-rim',
			area: ['600px', '450px'],
			btn: ['确定'],
			content: $("#explaincontent").html(),
			success: function(layero, index) {
				
			},
			yes: function(index, layero) {
				layer.closeAll();
			}
		});
	}



</script>







